<script setup lang="ts">
import { ref, watch, defineProps, defineEmits, computed } from "vue";
import Children from "./Children.vue";

// import { isEmpty } from "lodash";
interface VehicleTreeChildrens {
  id: string;
  indexNum: number;
  keyWord: string;
  name: string;
  nameEn: string;
  ndType: number;
  num: 0;
  carLogoUrl: string;
  childs: VehicleTreeChildrens[];
}
// Props 定义
interface Props {
  options: VehicleTreeChildrens;
  selectKey: string | null;
  isExpanded: boolean; // 父组件控制的是否展开状态
  autoExpandIds: string; //需要展开的车型的id
}
// Emits 定义
interface Emits {
  (event: "on-select", target: VehicleTreeChildrens): void;
  (event: "on-brand-expanded", brandName: string): void;
}

const props = defineProps<Props>();
const emits = defineEmits<Emits>();

// 子节点展开状态， isExpanded prop
const isExpandedLocal = ref(props.isExpanded || false);
const isExpanded = computed({
  get: () => props.isExpanded || isExpandedLocal.value,
  set: (value: any) => {
    if (!props.isExpanded) {
      isExpandedLocal.value = value;
    }
  },
});

// 字体加粗状态
const isBold = ref(false);

// 展开子节点.品牌点击事件
// Brand组件内
function handleBrandClick() {
  toggleBold();
  // console.log("Brand clicked. Current isExpandedLocal:", isExpandedLocal.value);
  if (props.options.childs.length === 0) return;

  // 切换本地状态
  isExpandedLocal.value = !isExpandedLocal.value; // 直接切换状态

  // console.log("After toggle, isExpandedLocal:", isExpandedLocal.value);
  // 发出自定义事件，通知祖先节点展开状态变化
  const brandName = props.options.id;
  // console.log("展开收起ididididi", brandName);
  emits("on-brand-expanded", brandName);
}
// 处理父节点展开事件（如果需要从外部触发）
function handleExpandParent() {
  toggleBold();
  handleBrandClick();
}
//qiehua huan zhaunfg bizhaunbf

// 切换字体加粗状态
function toggleBold() {
  isBold.value = !isBold.value;
}

/**
 * 车辆选中事件.
 * @param {VehicleTreeChildrens} target
 */
function handleSelected(target: VehicleTreeChildrens) {
  if (target.childs?.length) return;
  emits("on-select", target);
}

// 监听外部传入的 isExpanded prop，保持本地状态同步
// 监听props.isExpanded的变化
watch(
  () => props.isExpanded,
  (newVal: any) => {
    // console.log("isExpanded变化", props.isExpanded);
    if (newVal !== undefined) {
      isExpandedLocal.value = newVal;
    }
  }
);
watch(
  () => props.autoExpandIds,
  (newIds: any) => {
    // console.log("autoExpandIds", props.autoExpandIds);
    if (newIds.includes(props.options.id)) {
      isExpandedLocal.value = true; // 如果在自动展开的ID列表中，设置为展开状态
      toggleBold();
    } else {
      isExpandedLocal.value = false; // 如果不在列表中，设置为收起状态
      // toggleBold();
    }
  }
);
</script>

<template>
  <div class="flex" @click="handleBrandClick">
    <span
      class="inline-block mt-2 w-2 h-4 bg-[url('@/assets/temp/icons/forward.png')] bg-no-repeat bg-center"
      :class="{ 'rotate-90': isExpanded }"
    ></span>
    <div
      class="flex cursor-pointer Brand gap-x-1"
      @on-expand-parent="handleExpandParent"
      style="position: relative"
    >
      <img
        class="inline-block h-8 zi"
        :src="
          options.carLogoUrl || 'https://lxfile.lingxiuyun.net:9898/russia/XIULOGO.png'
        "
        style="margin-left: 0.3rem"
        alt=""
      />
      <span class="flex flex-col" style="position: relative" :data-id="options.id">
        <small class="text-sm" :class="{ bold: isBold }">{{ options.name }}</small>
        <small class="text-sm text-gray-400" :class="{ bold: isBold }">{{
          options.nameEn
        }}</small>
        <Children
          :autoExpandIds="autoExpandIds"
          style="left"
          :data-id="options.id"
          :options="options.childs"
          :select-key="selectKey"
          @on-select="handleSelected"
          v-show="isExpanded"
          v-if="options.childs"
        />
      </span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.zi {
  width: auto;
}
.left {
  left: 0;
}

.bold {
  font-weight: bold;
}
</style>
